import React, { Component } from 'react'
import { Layout, Button, Form, Input, Row, Col } from 'antd';
import PubSub from 'pubsub-js'
const { Content } = Layout;
/*
    功能：登陆页面，显示STUN服务器IP，端口，账号，房间号，头像，本地IP

*/
const formItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 10 },
    layout: 'horizontal',
    labelAlign: 'right'
};
const buttonItemLayout = {
    wrapperCol: { span: 12, offset: 3 }
}
export default class P2PLogin extends Component {
    handleSubmit = (values) => {
        console.log("submit serverip:" + values.serverIp);
        let pageinfo = { id: '15', name: 'page15_p2p_one2one', isP2PLogin: true }
        PubSub.publish('left_select_change', pageinfo)
    }

    render() {
        return (
            <Content
                className="site-layout-background"
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 700,
                }}>
                <Form {...formItemLayout} onFinish={this.handleSubmit}>
                    <Form.Item
                        name="userName"
                        label="用户名:"
                        required
                        labelAlign='right'
                    >
                        <Input placeholder="请输入用户名" style={{ width: 200 }}></Input>
                    </Form.Item>
                    <Form.Item
                        name="roomId"
                        label="房间号:"
                        required
                        labelAlign='right'
                    >
                        <Input placeholder="请输入房间号" style={{ width: 200 }}></Input>
                    </Form.Item>
                    <Form.Item
                        label="STUN服务器IP:"
                        required
                        labelAlign='right'
                    >
                        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} >
                            <Col span={7}>
                                <Form.Item name="stunIp">
                                    <Input placeholder="STUN服务器IP" style={{ width: 200 }}></Input>
                                </Form.Item>
                            </Col>
                            <Col span={7}>
                                <Form.Item name="stunPort">
                                    <Input placeholder="端口" style={{ width: 60 }}></Input>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form.Item>
                    <Form.Item {...buttonItemLayout}>
                        <Row gutter={4} >
                            <Col span={3}>
                                <Form.Item name="submit">
                                    <Button type="primary" htmlType="submit" className="login-join-button">
                                        登陆
                                    </Button>
                                </Form.Item>
                            </Col>
                            <Col span={3}>
                                <Form.Item name="cancel">
                                    <Button>退出</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
            </Content>
        )
    }
}
